<template>
  <div class="main">
    <div class="search">
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" size="medium">查询</el-button>
      <div class="topRight">
        <div>占用ip：117</div>
        <div class="data">空闲ip：127</div>
        <div class="btn btn1">
          <img src="@/assets/ip池/left.png" />

          上一网段
        </div>
        <div class="btn btn2">
          下一网段
          <!-- <span class="iconfont icon-jiantou_you"></span> -->
          <img src="@/assets/ip池/right.png" />
        </div>
      </div>
    </div>
    <div class="contain">
      <div class="section1 top">
        <div class="ips" v-for="i in 256">
          <div class="font">{{ i - 1 }}</div>
          <div class="pic">
            <img :src="imglist[i % 10].url" v-if="i % 2 == 0" />
            <img :src="imglist[i % 10].urls" v-if="i % 2 == 1" />
          </div>
        </div>
      </div>
    </div>
    <div class="inall">
      <div class="inallbg"></div>
    </div>
  </div>
</template>
<script type="text/babel">
export default {
  name: '',
  data() {
    return {
      options: [
        {
          value: '网段1',
          label: '网段1'
        },
        {
          value: '网段2',
          label: '网段2'
        },
        {
          value: '网段3',
          label: '网段3'
        }
      ],
      value: '',
      imglist: [
        {
          url: require('@/assets/ip池/1.png'),
          urls: require('@/assets/ip池/1n.png')
        },
        {
          url: require('@/assets/ip池/1.png'),
          urls: require('@/assets/ip池/1n.png')
        },
        {
          url: require('@/assets/ip池/2.png'),
          urls: require('@/assets/ip池/2n.png')
        },
        {
          url: require('@/assets/ip池/3.png'),
          urls: require('@/assets/ip池/3n.png')
        },
        {
          url: require('@/assets/ip池/4.png'),
          urls: require('@/assets/ip池/4n.png')
        },
        {
          url: require('@/assets/ip池/5.png'),
          urls: require('@/assets/ip池/5n.png')
        },
        {
          url: require('@/assets/ip池/6.png'),
          urls: require('@/assets/ip池/6n.png')
        },
        {
          url: require('@/assets/ip池/7.png'),
          urls: require('@/assets/ip池/7n.png')
        },
        {
          url: require('@/assets/ip池/8.png'),
          urls: require('@/assets/ip池/8n.png')
        },
        {
          url: require('@/assets/ip池/9.png'),
          urls: require('@/assets/ip池/9n.png')
        },
        {
          url: require('@/assets/ip池/10.png'),
          urls: require('@/assets/ip池/10n.png')
        }
      ]
    };
  },

  components: {},

  created() {},

  mounted() {},
  watch: {},

  computed: {}
};
</script>
<style lang="less" scoped>
::v-deep .el-select {
  margin-right: 10px;
}
.main {
  background: #f5f5f5;
  // height: 700px;
  height: 100vh;
  color: #6c6c6c;
  padding: 20px 30px;
}
.contain {
  overflow-x: auto;
  .top {
    margin-top: 20px;
  }
  .section2 {
    display: flex;
    margin-top: 13px;

    .ips {
      position: relative;
      height: 70px;
      width: 2.5%;
      margin: 0 10px;
      .font {
        text-align: center;
        position: absolute;
        top: 0;
        left: 10;
        color: #fff;
        width: 100%;
      }
      .pic {
        width: 100%;
        background-color: #71829e;
        height: 70px;
        border-radius: 2px;
      }
    }
  }
  .section1 {
    // border: 1px solid red;
    // display: flex;
    // margin-top: 13px;
    // width: 100%;
    min-width: 1600px;
    // flex-wrap: wrap;
    .ips {
      float: left;
      position: relative;
      // width: 2.5%;
      width: 44.2px;
      height: 80px;
      margin: 10px 0px 0 10.47px;
      .font {
        text-align: center;
        position: absolute;
        top: 0;
        left: 10;
        color: #fff;
        width: 100%;
      }
      .pic {
        img {
          width: 100%;
          height: 80px;
          border-radius: 2px;
        }
      }
    }
  }
}
.search {
  // transform:scale(.9);
  display: flex;
  align-items: center;
}
.topRight {
  display: flex;
  align-items: center;
  margin-left: auto;
  .data {
    margin-left: 10px;
  }
  .btn {
    margin-left: 10px;
    // border: 1px solid #6c6c6c;
    background-color: #fdfdfd;
    // border-radius: 5px;
    // padding: 0 10px;
    font-size: 13px;
    width: 100px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/ip池/radius.png');
    background-size: 100% 100%;
    img {
      width: 10px;
    }
  }
  .btn1 {
    img {
      margin-right: 5px;
    }
  }
  .btn2 {
    img {
      margin-left: 5px;
    }
  }
}
.inall {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  .inallbg {
    background-image: url('../assets/ip池/inall.png');
    background-size: 100% 100%;
    height: 18px;
    width: 300px;
  }
}
</style>
